<div class="grid-100 Top-Bar">
    <div class="grid-20">
        <a href="javascript:void(0)">
                <img src="assets/img/sso/unis-co.png" style="width:150px; height:60px" alt="logo" class="logo-default" />
            </a>
    </div>
    <div class="grid-80 Valley" style="line-height:60px">
        <div class="grid-25">
            <span>{{currentFacilityAndCompany.facility.name}}</span>
        </div>
        <div class="grid-25">
            <span>{{currentFacilityAndCompany.company.name}}</span>
        </div>
        <div class="grid-50">
          <span style="float:right">{{currentTime}}&nbsp;&nbsp;&nbsp;{{currentHMS}}</span>
        </div>

    </div>

</div>
<div class="grid-100" style="padding:20px 30px;background: #55626b;">
    <div class="grid-100 monitor-container">
        <div class="grid-50 Rectangle" style="width: 42%;margin-right: 2%;  padding: 0px;">
            <div class="rec-title">
                <div class="f-left Valley"><label> Todays Schedule</label></div>
                <div class="f-right F-type"><label> Page {{scheduledDocumentPager.currentPage}} of {{scheduledDocumentPager.totalPage}}</label></div>
            </div>
            <div class="grid-100" style="padding:0px">
                <table class="monitor-overview-table F-type">
                    <thead>
                        <tr>
                            <th>Type</th>
                            <th style="width: 16%;">Doc#</th>
                            <th>Customer</th>
                            <th>Carrier</th>
                            <th style="width: 23%">Schedule Time</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="doc in scheduledDocumentView">
                            <td>
                                <div class="Rectangle-pickup" ng-if="doc.id.indexOf('RN') == -1">
                                    <span style="font-size:18px;">Outbound</span>&nbsp;<img src="assets/svg/outbound.svg" class="boundsvg" />
                                </div>

                                <div class="Rectangle-dropoff" ng-if="doc.id.indexOf('RN') > -1">
                                    <span>Inbound</span>&nbsp;<img src="assets/svg/inbound.svg" class="boundsvg" />
                                </div>
                            </td>
                            </td>
                            <td><span class="spandot">{{doc.id}}</span></td>
                            <td><span class="spandot">{{doc.customerName}}</span></td>
                            <td><span class="spandot">{{doc.carrierName}}</span></td>
                            <td><span class="spandot">{{doc.id.indexOf('RN') > -1 ? doc.appointmentTime? doc.appointmentTime: doc.eta : doc.appointmentTime? doc.appointmentTime: doc.mabd | amDateFormat:'YYYY-MM-DD HH'}} </span></td>
                        </tr>

                    </tbody>
                </table>

            </div>
        </div>
        <div class="grid-50 Rectangle" style="width: 56%; padding: 0px;">
            <div class="grid-100" style=" padding: 0px;">
                <div class="rec-title">
                    <div class="f-left Valley"><label> Need to Assign </label></div>
                    <div class="f-right F-type"><label> Page {{unAssignedDocumentPager.currentPage}} of {{unAssignedDocumentPager.totalPage}}</label></div>
                </div>
            </div>
            <div class="grid-100" style="padding:0px">
                <table class="monitor-overview-table F-type">
                    <thead>
                        <tr>
                            <th>Type</th>
                            <th>Doc#</th>
                            <th>EntryID#</th>
                            <th>Equipment Type</th>
                            <th>Location</th>
                            <th>Customer</th>
                            <th>Duration</th>

                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="uAssignedDoc in unAssignedDocumentView">
                            <td>
                                <div class="Rectangle-pickup" ng-if="uAssignedDoc.id.indexOf('RN') == -1">
                                    <span style="font-size:18px;">Outbound</span>&nbsp;<img src="assets/svg/outbound.svg" class="boundsvg" />
                                </div>

                                <div class="Rectangle-dropoff" ng-if="uAssignedDoc.id.indexOf('RN') > -1">
                                    <span>Inbound</span>&nbsp;<img src="assets/svg/inbound.svg" class="boundsvg" />
                                </div>

                                <!-- {{uAssignedDoc.id.indexOf('RN') > -1 ? 'Inbound':'Outbound'}}  -->
                            </td>
                            <td>{{uAssignedDoc.id}}</td>
                            <td>{{uAssignedDoc.entryId}}</td>
                            <td>{{uAssignedDoc.checkInData.equipmentType}}</td>
                            <td>{{uAssignedDoc.dockName}}</td>
                            <td>{{uAssignedDoc.customerName}}</td>
                            <td>{{uAssignedDoc.duration ? formatSeconds(uAssignedDoc.duration):'N/A'}}</td>

                        </tr>

                    </tbody>
                </table>

            </div>
        </div>
    </div>
    <div class="grid-100 " style="padding-top: 20px;">
        <div class="grid-100 Rectangle-assign" style=" padding: 0px;">
            <div class="grid-100" style=" padding: 0;">
                <div class="rec-title">
                    <div class="f-left Valley"><label> Assigned</label></div>
                    <div class="f-right F-type"><label> Page {{assignedDocumentPager.currentPage}} of {{assignedDocumentPager.totalPage}}</label></div>
                </div>
            </div>
            <div class="grid-100" style="padding: 0px;">
                <table class="monitor-overview-table F-type">
                    <thead>
                        <tr>
                            <th>Type</th>
                            <th>Doc#</th>
                            <th>EntryID</th>
                            <th>Equipment Type</th>
                            <th>Location</th>
                            <th>Customer</th>
                            <th>Worker</th>
                            <th>Duration</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="doc in assignedDocumentView">
                            <td>
                                   <div class="Rectangle-pickup" ng-if="doc.id.indexOf('RN') == -1">
                                    <span style="font-size:18px;">Outbound</span>&nbsp;<img src="assets/svg/outbound.svg" class="boundsvg" />
                                </div>

                                <div class="Rectangle-dropoff" ng-if="doc.id.indexOf('RN') > -1">
                                    <span>Inbound</span>&nbsp;<img src="assets/svg/inbound.svg" class="boundsvg" />
                                </div>
                                <!-- {{doc.id.indexOf('RN') > -1 ? 'Inbound':'Outbound'}} -->
                            </td>
                            <td>{{doc.id}}</td>
                            <td>{{doc.entryId}}</td>
                            <td>{{doc.checkInData.equipmentType}}</td>
                            <td>{{doc.dockName}}</td>
                            <td>{{doc.customerName}}</td>
                            <td>{{doc.assignee.firstName}} {{doc.assignee.lastName}}</td>
                            <td>{{formatSeconds(doc.duration)}}</td>
                        </tr>


                    </tbody>
                </table>

            </div>
        </div>


    </div>
</div>
<div class="grid-100 Rectangle-summer">
    <div class="grid-20 Valley " style="line-height:103px">
        Today's Summary
    </div>
    <div class="grid-80" style="padding:16px 0px 20px 0px">
        <div class="grid-100">

            <div ng-style="{'width':(scheduledDocuments.length/(scheduledDocuments.length+unAssignedDocuments.length+assignedDocuments.length))*100+'%','background':'#FAAD28','height':'30px','display':'inline-block','float':'left'}"></div>

            <div ng-style="{'width':(unAssignedDocuments.length/(scheduledDocuments.length+unAssignedDocuments.length+assignedDocuments.length))*100+'%','background':'#32c5d2','height':'30px','display':'inline-block','float':'left'}"></div>

            <div ng-style="{'width':(assignedDocuments.length/(scheduledDocuments.length+unAssignedDocuments.length+assignedDocuments.length))*100+'%','background':'#A34EDD','height':'30px','display':'inline-block','float':'left'}"></div>


        </div>
        <div class="grid-100 F-type" style="padding-top:12px;padding-left: 0px;">
            <div class="grid-20">
                <div class="square bg-orange">

                </div>
                <label class="square-lable"> Scheduled-{{scheduledDocuments.length}}</label>
            </div>
            <div class="grid-20">
                <div class="square bg-green">

                </div>
                <label class="square-lable"> Need to Assign-{{unAssignedDocuments.length}}</label>
            </div>
            <div class="grid-20">
                <div class="square bg-purple">

                </div>
                <label class="square-lable"> Assigned-{{assignedDocuments.length}}</label>
            </div>
        </div>

    </div>
</div>